<script setup lang='ts'>
import { ref } from 'vue'
import type { UserItem } from '@/types/dept'
import type { comment } from '@/types/docter'
import type { User, AppRegistrationDto } from '@/types/userDetails'
import type { Patient } from '@/types/sys/patient'
import { getUserDelailsList, getDeptByDeptId } from '@/services/userDetails'
import { getAppRegistrationDto } from '../../services/docter/patient'
import { onLoad } from '@dcloudio/uni-app'
import {
  getDictData,
  findDict,
  getDatesubstring,
  getDate,
  getAverage,
  geiTime,
} from '../../utils/util'
import type { DictData } from '@/types/global'
import { getMyScheduling } from '@/services/userDetails'
import { getComment } from '@/services/docter/comment'
import type { myScheduling, myData } from '@/types/myScheduling'
// uniapp 获取页面参数
const query = defineProps<{
  userId: string;
}>()

//User表的全部数据
const userList = ref<User>()

//获取表User的全部数据
const getUserListData = async () => {
  const res = await getUserDelailsList(query.userId)
  userList.value = res.data
  getDeptByDeptIdData()
}

//部门表的全部数据
const deptList = ref<UserItem>()
//获取部门的数据
const getDeptByDeptIdData = async () => {
  const res = await getDeptByDeptId(String(userList.value?.deptId))
  deptList.value = res.data
}

//挂号处理
const getAppRegistrationData = async (ev: AppRegistrationDto) => {
  const res = await getAppRegistrationDto(ev)
  if (res.code == 200) {
    uni.showToast({ icon: 'success', title: res.msg })
  } else {
    uni.showToast({ icon: 'error', title: res.msg })
  }
}
//患者评论数据
const commitDate = ref<comment>()
//获取患者评论数据
const getCommentDate = async (id: string) => {
  const res = await getComment(query.userId)
  commitDate.value = res.data
}

// 获取sys_user_background字典的数据
const backgroundList = ref<DictData[]>([])
const getBackgroundList = async () => {
  const res = await findDict('sys_user_background')
  backgroundList.value = res.data
}

// 获取sys_user_background字典的数据
const userRankList = ref<DictData[]>([])
const getuserRankList = async () => {
  const res = await findDict('sys_user_level')
  userRankList.value = res.data
}

//我的排班数据
const mySchedulingData = ref<myScheduling>()
const myScheData = ref<myData>()

//获取我的排班数据
const getMySchedulingData = async () => {
  const res = await getMyScheduling({
    userId: query.userId,
  })
  mySchedulingData.value = geiTime(res.data)
}

const scroll: UniHelper.ScrollViewOnScroll = (e) => {
  console.log(e)
}

//
const firm = (ev: string, day: string, va: string) => {
  if (va != '1') {
    return null
  }
  uni.showModal({
    title: '提示',
    content:
      '是否挂' +
      day +
      '(' +
      (ev == '1' ? '上午' : ev == '2' ? '中午' : '晚上') +
      ')的号',
    success: function(res) {
      if (res.confirm) {
        const registrationDto: AppRegistrationDto = {
          user: userList.value,
          deptId: deptList.value?.deptId,
          subsectionType: ev,
          visitDate: day,
        }
        getAppRegistrationData(registrationDto)
        setTimeout(() => {
          uni.showToast({
            icon: 'none',
            title: '请于' + day + '(' + (ev == '1' ? '上午' : ev == '2' ? '中午' : '晚上') + ')之前前往医院收费处缴费',
            duration: 2000,
          })
        }, 1000)
      } else if (res.cancel) {
        uni.showToast({ icon: 'fail', title: '取消挂号' })
      }
    },
  })
}

const imageStyles = ref({})

const backgroundData = ''
onLoad(() => {
  Promise.all([
    getBackgroundList(),
    getuserRankList(),
    getUserListData(),
    getCommentDate('2'),
    getMySchedulingData(),
  ])
})
</script>
<template>
  <view class='userDetail'>
    <view class='picture'>
      <image :src='userList?.picture' mode='scaleToFill' />
      <text class='rate'
      >
        <uni-rate
          :readonly='true'
          :value='getAverage(commitDate)'
          size='40rpx'
        />
      </text>
    </view>

    <view class='name'>
      <text class='name2'>
        <text class='bold'>{{ userList?.userName }} &nbsp;</text>
        {{ deptList?.deptName }} &nbsp;{{
          getDictData(userRankList, userList?.userRank!)
        }}
      </text
      >
      <text class='deptName'></text>
    </view>
    <view class='main'>
      <view
      >
        <text class='Green1'>简介:&nbsp;</text>
        {{ userList?.userName }},&nbsp;
        {{ userList?.sex == '1' ? '男' : '女' }},&nbsp;{{
          getDictData(userRankList, userList?.userRank!)
        }},&nbsp;{{ userList?.introduction }}
      </view
      >
      <br />
      <view>
        <text class='Green2'>擅长:{{userList?.strong}}</text>
      </view>
    </view>

    <view class='gh'>
      <text
        class='title'
        style='
          background-image: linear-gradient(to bottom right, #3ece80, #ffffff);
        '
      >医院门诊挂号
      </text
      >
      <scroll-view
        class='scroll-view_H'
        scroll-x='true'
        scroll-with-animation='true'
        @scroll='scroll'
        scroll-left='120'
      >
        <view class='mySch'>
          <table class='tab'>
            <tr>
              <td style='width: 40px; height: 30px'></td>
              <td
                v-for='(value, key, index) in mySchedulingData?.labelNames'
                :key='index'
              >
                <span class='date'>{{ getDatesubstring(value).date }}</span>
              </td>
            </tr>
            <tr>
              <td style='width: 40px; height: 30px'></td>
              <td
                style='width: 40px; height: 20px'
                v-for='(value, key, index) in mySchedulingData?.labelNames'
                :key='index'
              >
                <span class='day'>{{ getDatesubstring(value).day }}</span>
              </td>
            </tr>
            <tr
              class='main'
              v-for='(value, key, index) in mySchedulingData?.tableData'
              :key='index'
            >
              <td>
                <text class='time'>{{
                    value.subsectionType == '1'
                      ? '上午'
                      : value.subsectionType == '2'
                        ? '下午'
                        : '晚上'
                  }}
                </text>
              </td>
              <td
                class='yuyue'
                v-for='(va,index2) in value.schedulingType'
                :key='index2'
              >
                <button
                  class='but'
                  :style="{
                    backgroundColor: va === '1' ? '#3ece80' : '#dddddd',
                  }"
                  @tap='
                    firm(
                      value.subsectionType,
                      mySchedulingData!.labelNames[index2],
                      va
                    )
                  '
                >
                  <span class='font1' style='color: #ffffff'>{{
                      va == '1' ? '预约' : '无号'
                    }}</span>
                </button>
              </td>
            </tr>
          </table>
        </view>
      </scroll-view>
    </view>

    <view class='comment'>
      <text
        class='title'
        style='
          background-image: linear-gradient(to bottom right, #3ece80, #ffffff);
        '
      >患者评价
      </text
      >

      <uni-list>
        <uni-list :border='true'>
          <!-- 显示圆形头像 -commitDate staff-filled-->
          <text v-for='(value, key, index) in commitDate' :key='index'>
            <uni-list-chat
              :avatar-circle='true'
              :title='value.name'
              :avatar='value.avatar'
              :note='value.content'
              :time='value.addTime'
            >
              <span style='font-size: 70%; color: #525453'>{{
                  getDate(value.addTime)
                }}</span>
              <text>
                <uni-rate :readonly='true' :value='value.star' size='30rpx' />
              </text>
            </uni-list-chat>
          </text>
        </uni-list>
      </uni-list>
    </view>
  </view>
</template>

<style scoped lang='scss'>
.scroll-view_H {
  white-space: nowrap;
  width: 100%;
}
.title {
  margin-left: 20rpx;
  margin-bottom: 20rpx;
}

.gh {
  margin-top: 50rpx;
}

.comment {
  margin-top: 50rpx;
}

.userDetail {
  width: 100%;
  // padding: 30rpx

  .picture {
    // width: 180rpx;
    // height: 180rpx;
    padding: 20rpx;
    height: 300rpx;
    background-size: 100% auto;
    background-image: url(https://hos-health.oss-cn-guangzhou.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20231221164149.jpg);
    vertical-align: middle;

    image {
      width: 180rpx;
      border-radius: 50%;
      height: 180rpx;
      vertical-align: middle;
      margin: 45rpx 12rpx;
    }
  }

  .name {
    .name2 {
      position: relative;
      left: 55rpx;

      .bold {
        font-size: 42rpx;
        font-weight: 900;
      }
    }
  }

  .main {
    margin-top: 30rpx;
    padding: 0 40rpx;

    .Green1 {
      color: #8bd085;
    }

    .Green2 {
      color: #8bd085;
    }
  }

  .rate {
    position: relative;
    top: -60rpx;
    left: 3rpx;
  }

  .mySch {
    position: relative;
    white-space: nowrap;
    padding: 0 40rpx;

    .tab {
      table-layout: fixed;
      width: 1000rpx;
      height: 50rpx;

      .break {
        width: 100rpx;
        height: 100rpx;
        white-space: nowrap;
      }

      .date {
        font-size: 80%;
        position: relative;
        left: 25rpx;
        top: 10rpx;
      }

      .day {
        position: relative;
        left: 30rpx;
        font-weight: 40;
        color: #a59eb0;
        font-size: 80%;
      }

      .main {
        .time {
          color: #a59eb0;
          font-size: 80%;
        }

        .yuyue {
          .but {
            width: 40px;
            height: 40px;
            border-radius: 60%;
            // background-color: #ff0000;
            // color: #ffffff;
            font-size: 20px;
          }

          .font1 {
            font-size: 80%;
            position: relative;
            top: -20rpx;
            left: -20rpx;
          }
        }
      }
    }
  }
}

.circle-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #dddddd;

  font-size: 24px;
}

.circle-button text {
  color: #ffffff;
  font-size: 40%;
  position: relative;
  top: -20rpx;
  left: 0rpx;
}
</style>
